<template>
	<view class="">
		<NavBar title="个人资料" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<view class="row1">
				<view class="flex m_b_14">
					<view class="m_r_16" style="width: 14rpx;height: 14rpx;border-radius: 50%;background: #FD6725;">

					</view>
					<view class="">
						<text class="f_30_0_b">
							个人资料
						</text>
					</view>
				</view>
				<view class="row1_avatar flex_both" @click="setAvatar">
					<view class="">
						<up-image :show-loading="true" :src="userInfo.avatar" width="96rpx" height="96rpx"
							shape="circle"></up-image>
					</view>
					<view class="m_b_20">
						<up-image :show-loading="true" src="/static/images/my/arrow_right.png" width="14rpx"
							height="24rpx"></up-image>
					</view>
				</view>
				<view class="row1_list">
					<view class="row1_item flex_both" @click="setName">
						<view class="m_b_4">
							<text class="f_24_0" style="color: #A8A7A7;">
								昵称
							</text>
						</view>
						<view class="flex">
							<view class="m_r_14">
								<text class="f_28_0_b">
									{{userInfo.nickname}}
								</text>
							</view>
							<view class="m_b_20">
								<up-image :show-loading="true" src="/static/images/my/arrow_right.png" width="14rpx"
									height="24rpx"></up-image>
							</view>
						</view>
					</view>
					<view class="row1_item flex_both" @click="setGender">
						<view class="m_b_4">
							<text class="f_24_0" style="color: #A8A7A7;">
								性别
							</text>
						</view>
						<view class="flex">
							<view class="m_r_14">
								<text class="f_28_0_b">
									{{userInfo.gender?'男':'女'}}
								</text>
							</view>
							<view class="m_b_20">
								<up-image :show-loading="true" src="/static/images/my/arrow_right.png" width="14rpx"
									height="24rpx"></up-image>
							</view>
						</view>
					</view>
					<view class="row1_item flex_both" @click="editPhone">
						<view class="m_b_4">
							<text class="f_24_0" style="color: #A8A7A7;">
								手机号
							</text>
						</view>
						<view class="flex">
							<view class="m_r_14">
								<text class="f_28_0_b">
									{{userInfo.contact_mobile}}
								</text>
							</view>
							<view class="m_b_20">
								<up-image :show-loading="true" src="/static/images/my/arrow_right.png" width="14rpx"
									height="24rpx"></up-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const goto = (url) => {
		proxy.$gloab.gotoPage(url)
	}
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 76}rpx)`
			}
		});
	})
	onShow(() => {
		getUserInfo()
	})
	const userInfo = ref()
	const getUserInfo = async () => {
		let res = await proxy.$http('my.getUserInfo')
		let data = res.data
		userInfo.value = data
	}
	const setAvatar = () => {
		goto(`/pages/my/set/setAvatar?avatar=${userInfo.value.avatar}`)
	}
	const editPhone = () => {
		goto(`/pages/my/set/editPhone?phone=${userInfo.value.contact_mobile}`)
	}
	const setName = () => {
		goto(`/pages/my/set/setName?name=${userInfo.value.nickname}`)
	}
	const setGender = () => {
		goto(`/pages/my/set/setGender?gender=${userInfo.value.gender}`)
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.row1 {
			padding: 36rpx 26rpx;
			padding-bottom: 16rpx;
			background: #FFFFFF;
			box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
			border-radius: 10rpx;

			.row1_avatar {
				padding: 30rpx 0;
			}

			.row1_list {
				.row1_item {
					padding: 46rpx 0;
					border-top: 2rpx solid #F3F3F1;
				}
			}
		}

	}
</style>